<template>
	<view class="m-pk" @click.stop="handlePkClick">
		<view class="top-user-info" :style="{top:top+'rpx'}">
			<view class="pk-center">
				<view class="left-myGirl"
					:class="{'active-left-girl':isMyRound&&(isStart&&!isEnd)&&!nowMyGirlData.playEnd}">
					<view class="top-avatar">
						<view class="avatar-content">
							<image v-if="nowMyGirlData.image" class="avatar-img" :src="nowMyGirlData.image"
								mode="widthFix">
							</image>
						</view>

						<!-- 		<view class="masker" v-if="!isMyRound&&(isStart&&!isEnd)">
							<text v-if="!nowMyGirlData.playEnd">等待中</text>
							<text v-else>已结束</text>
						</view>
						<view class="masker" v-if="isEnd">已结束</view> -->
					</view>
					<view class="bottom-name">
						{{nowMyGirlData.name}}
					</view>
				</view>
				<view class="center-blood">
					<!-- 即将开始 -->
					<view class="top-tip">
						<text v-if="!isStart">即将开始</text>
						<u-count-down v-if="isStart&&!isEnd" ref="mcountDown"
							style="text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .3) !important;font-weight: 400;display: none"
							@change="handleTimeChange" @end="handleCountDownEnd" :timestamp="timestamp"
							separator-size="24" bg-color="transparent" :show-hours="false" separator-color="#fff"
							font-size="24" color="#fff"></u-count-down>

						<text v-if="isStart&&!isEnd">{{nowRoundData.roundName}}</text>
						<text v-if="isEnd">已结束</text>
					</view>
					<view class="blood-content">
						<view class="blood-left" :class="{'active-left':leftPercent>50}"
							:style="{width:(!leftPercent||leftPercent==0)?'10%':leftPercent+'%'}">
							<text v-if="isStart">{{leftPoint}}</text>
							<text v-else>0</text>
							<view class="forward">
								<view class="forwar-content"></view>
							</view>
						</view>
						<view class="blood-right" :class="{'active-right':leftPercent<50}">
							<text v-if="isStart">{{rightPoint}}</text>
							<text v-else>0</text>
							<view class="forward">
								<view class="forwar-content"></view>
							</view>
						</view>
					</view>

					<view class="wait-list">
						<view class="left-wait-list">
							<view class="wait-item" v-for="(item,index) in myPersonWaitList" :key="index">
								<image class="wait-image" :src="item.image" mode="aspectFill"></image>
							</view>
						</view>
						<view class="right-wait-list">
							<view class="wait-item" v-for="(item,index) in enemyTopUsePersonData" :key="index">
								<image class="wait-image" :src="item.image" mode="aspectFill"></image>
							</view>
						</view>
					</view>



				</view>
				<view class="right-thatGirl"
					:class="{'active-right-girl':!isMyRound&&(isStart&&!isEnd)&&!nowEnemyGirlData.playEnd}">
					<view class="top-avatar">
						<view class="avatar-content">
							<image v-if="nowEnemyGirlData.image" class="avatar-img" :src="nowEnemyGirlData.image"
								mode="widthFix">
							</image>
						</view>

						<!-- 						<view class="masker" v-if="(isMyRound&&(isStart&&!isEnd))|| nowEnemyGirlData.playEnd">
							<text v-if="!nowEnemyGirlData.playEnd">等待中</text>
							<text v-else>已结束</text>
						</view>
						<view class="masker" v-if="isEnd">已结束</view> -->
					</view>
					<view class="bottom-name">
						<text>{{nowEnemyGirlData.name}}</text>
					</view>
				</view>

			</view>

		</view>

		<!-- 		<view class="gift-icon" @click.stop="handleGiftClick" @touchend.stop>
			<image class="gift-icon-img"
				src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/fdd8f16308b5474bbc6ead2a16f38d73.png"
				mode=""></image>

		</view> -->
		<!-- 		<video src="https://cdn.osisx.com/game/e416845113cdf0df55ad616de9bf72b2/20240926/VID7023d139/VID7023d139.mp4"
			class="pkVideo" object-fit="cover" autoplay="true" :controls="false" :loop="true"
			@timeupdate="handleTimeUpdate"></video> -->
		<scrollPinlun v-if="storyId == curStoryId" ref="mScrollPinlun" :height="pinlunHeigh" :bottom="pinlunBottom"
			:listData="pinlunListData">
		</scrollPinlun>
		<!-- <mPkModal ref="mPkModal"></mPkModal> -->

		<!-- 		<view class="test-left">

		</view> -->
		<pkClickEffect ref="pkClickEffect" @flyNowIcon="flyNowIcon"></pkClickEffect>
		<giftFloat ref="giftFloat" :top="giftFlyTop" />
		<!-- v-if="storyId == curStoryId" -->
		<skillCards @playCardGift="playCardGift" :isEnd="isEnd" :bottom="skillBottom" />
		<resultModal ref="resultModal"></resultModal>

	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations,
		mapState
	} from "vuex";
	import scrollPinlun from '@/components/scroll-pinlun/index.vue'
	import pkClickEffect from '@/components/m-pk-click-effect/index.vue'
	import giftFloat from '@/components/m-pk/gift-float.vue'
	import skillCards from './skill-cards.vue'
	import resultModal from './result-modal.vue'
	export default {
		props: {
			paramsJson: {
				type: Object,
				default: () => {
					return {}
				}
			},
			storyId: {
				type: String,
				default: ""
			}
		},
		components: {
			scrollPinlun,
			pkClickEffect,
			giftFloat,
			skillCards,
			resultModal
		},
		data() {
			return {
				isMyFlag: false,
				isEnemyFlag: false,
				isMyScale: false,
				isEnemyScale: false,
				nowEnemyGirlData: {},
				nowMyGirlData: {},
				isMyRound: false,
				activeRoundIndex: 0,
				nowRoundData: {},
				roundDataList: [],
				myPerSonList: [],
				enemyPersonList: [],


				myPersonWaitList: [],
				enemyPersonWaitList: [],
				waitStartTime: 0,
				isStart: false,
				autoAddIntervalId: null,
				isEnd: false,
				timestamp: 90,
				top: 168,
				leftPoint: 0,
				rightPoint: 0,
				baseClickPoint: 1,
				svgStyle: "width:100vw;height:1000rpx;position:absolute;top:400rpx;left:0rpx",
				// 评论组件参数
				pinlunHeigh: 380,
				pinlunBottom: 260,
				pinlunListData: [],
				// 配置未加
				// 技能卡组件
				skillBottom: 20,

				// 飞翔的礼物
				giftFlyTop: 920,
				isInit: false

			}
		},
		computed: {
			...mapState(["curStoryId"]),
			leftPercent() {
				if (this.isStart) {
					let total = this.leftPoint + this.rightPoint
					let percent = ((this.leftPoint / total) * 100).toFixed(2)
					return percent <= 10 ? 10 : percent
				} else {
					return 50
				}

			},
			enemyTopUsePersonData() {
				console.log("排序前", this.enemyPersonWaitList);
				let arr = this.enemyPersonWaitList.slice().reverse();
				console.log("排序后", arr);
				return arr
			}
		},
		watch: {
			curStoryId: {
				handler(newVal, oldVal) {
					if (this.storyId == this.curStoryId) {
						this.getProps()
						this.handleGetData()
					}
				},
				deep: true,
				immediate: true
			}
		},
		mounted() {},
		created() {},

		methods: {
			handleTimeUpdate(e) {
				let currentTime = e.detail.currentTime
				// 判断数据是否已经获取完毕
				if (this.nowRoundData.endTime) {
					this.isStart = true
					let nowRoundData = this.nowRoundData


					// 我方轮次
					if (currentTime >= this.nowRoundData.myBeginTime && currentTime < this.nowRoundData.myEndTime && !this
						.isMyFlag) {
						console.log('标记我方');
						this.isMyRound = true
						this.isMyFlag = true
					}

					// 对方轮次
					if (currentTime >= this.nowRoundData.enemyBeginTime && currentTime < this.nowRoundData.enemyEndTime &&
						!this.isEnemyFlag) {
						console.log("标记敌方");
						this.isMyRound = false
						this.isEnemyFlag = true
					}


					// 我方轮次结束
					if (currentTime >= this.nowRoundData.myEndTime && !this.isMyScale) {
						console.log('我方轮次结束');
						if (this.myPersonWaitList.length) {
							// 更新我方当前数据以及等待列表数据
							this.nowMyGirlData = this.myPersonWaitList[0]
							this.myPersonWaitList.splice(0, 1)
							this.isMyScale = true
						} else {
							this.nowMyGirlData.playEnd = true
							this.isMyScale = true
						}

					}

					// 敌方轮次结束
					if (currentTime >= this.nowRoundData.enemyEndTime && !this
						.isEnemyScale) {
						console.log("敌方轮次结束");
						if (this.enemyPersonWaitList.length) {
							console.log('敌方轮次结束，进入上边');
							// 更新我方当前数据以及等待列表数据
							this.nowEnemyGirlData = this.enemyPersonWaitList[0]
							this.enemyPersonWaitList.splice(0, 1)
							this.isEnemyScale = true
						} else {
							this.nowEnemyGirlData.playEnd = true
							this.isEnemyScale = true
							console.log('敌方轮次结束，进入这里', this.nowEnemyGirlData.playEnd);
						}


					}

					// 切换轮次数据
					if ((currentTime >= nowRoundData.endTime) && (this.activeRoundIndex < this.roundDataList.length - 1)) {
						this.activeRoundIndex += 1
						this.nowRoundData = this.roundDataList[this.activeRoundIndex]
						this.isMyFlag = false
						this.isEnemyFlag = false
						this.isMyScale = false
						this.isEnemyScale = false

						// console.log("轮次切换", this.activeRoundIndex);

					}
				}
			},
			handleGetData() {
				this.myPerSonList = [{
							id: 0,
							name: "白领制服·秘书",
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/71ee11eebf0c4f6d8a1a94368cdce6ba.jpg",
							type: "person",
							start: 3
						},
						{
							id: 1,
							name: "制服诱惑·秘书",
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1e9ef7b1cf524c09acb62c202ea4f262.jpg",
							type: "person",
							start: 5
						},
						{
							id: 2,
							name: "清纯可爱·秘书",
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/68075b52d7764ff2b5cf3d8d04856188.jpg",
							type: "person",
							start: 4
						}
					],
					this.enemyPersonList = [{
							id: 5,
							name: "幸运女神·妙陈",
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/afa5839633f64d4fa8c71162eef9cfb9.png",
							type: "person",
							start: 5
						},
						{
							id: 6,
							name: "泳装教练·妙陈",
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8d247b99171949ddab010bd8e7eda006.png",
							type: "person",
							start: 4
						},
						{
							id: 7,
							name: "兔兔警官·妙陈",
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d82a4c86df524fdb82088d48754ea85e.png",
							type: "person",
							start: 3
						}
					]

				// 当前使用数据
				this.nowMyGirlData = this.myPerSonList[0]
				this.nowEnemyGirlData = this.enemyPersonList[0]

				// 取出等待列表
				this.myPersonWaitList = this.myPerSonList.splice(1)
				this.enemyPersonWaitList = this.enemyPersonList.splice(1)

				// 轮次安排数据
				this.roundDataList = [{
						roundName: "第1/3回合",
						beginTime: 0,
						endTime: 28,
						myBeginTime: 0,
						myEndTime: 14,
						enemyBeginTime: 14,
						enemyEndTime: 28,

					},
					{
						roundName: "第2/3回合",
						beginTime: 28,
						endTime: 54,
						myBeginTime: 28,
						myEndTime: 39,
						enemyBeginTime: 39,
						enemyEndTime: 54,

					},
					{
						roundName: "第3/3回合",
						beginTime: 54,
						endTime: 84,
						myBeginTime: 54,
						myEndTime: 63,
						enemyBeginTime: 63,
						enemyEndTime: 84,

					},
				]

				if (this.roundDataList.length) {
					this.nowRoundData = this.roundDataList[0]
				}

			},
			handleTimeChange(e) {
				// console.log("倒计时", this.timestamp - e);
				let nowSecond = this.timestamp - e

			},
			playCardGift(e) {
				this.$emit("playCardGift", {
					...e,
					playType: 'gift'
				})
			},
			flyNowIcon(e) {
				if (this.$refs.giftFloat) {
					this.$refs.giftFloat.handleStartFly(e)
				}
			},
			getProps() {
				if (!this.isInit) {
					let paramsJson = this.paramsJson
					this.waitStartTime = paramsJson.waitStartTime && paramsJson.waitStartTime.default ? paramsJson
						.waitStartTime.default : this
						.waitStartTime
					this.timestamp = paramsJson.timestamp && paramsJson.timestamp.default ? paramsJson.timestamp.default :
						this
						.timestamp
					this.top = paramsJson.top && paramsJson.top.default ? paramsJson.top.default : this.top
					this.baseClickPoint = paramsJson.baseClickPoint && paramsJson.baseClickPoint.default ? paramsJson
						.baseClickPoint.default : this
						.baseClickPoint

					this.svgStyle = paramsJson.svgStyle && paramsJson.svgStyle.default ? paramsJson.svgStyle.default : this
						.svgStyle
					this.pinlunHeigh = paramsJson.pinlunHeigh && paramsJson.pinlunHeigh.default ? paramsJson.pinlunHeigh
						.default : this.pinlunHeigh
					this.pinlunBottom = paramsJson.pinlunBottom && paramsJson.pinlunBottom.default ? paramsJson
						.pinlunBottom
						.default : this
						.pinlunBottom
					this.skillBottom = paramsJson.skillBottom && paramsJson.skillBottom.default ? paramsJson.skillBottom
						.default : this
						.skillBottom
					this.giftFlyTop = paramsJson.giftFlyTop && paramsJson.giftFlyTop.default ? paramsJson.giftFlyTop
						.default : this
						.giftFlyTop

					this.$emit("changeSvgaStyle", this.svgStyle)
					this.handleStartPkProgram()
				} else {
					this.isInit = true
				}


			},
			// 开始正式pk前先执行
			handleStartPkProgram() {
				setTimeout(() => {
					// this.isStart = true
					this.startPk()
				}, this.waitStartTime * 1000)
			},
			handleGiftClick() {
				// console.log("礼物点击");
				this.$emit("openGiftPop")

			},
			handleCountDownEnd() {
				console.log("倒计时结束");
				this.$emit("clearSvga")
				this.isEnd = true
				clearInterval(this.autoAddIntervalId)
				if (this.leftPoint < this.rightPoint) {
					console.log("pk失败");
					this.$refs.resultModal.open("fail")
				} else {
					console.log("pk胜利");
					this.$refs.resultModal.open("success")
				}


			},
			getRandomValue(type) {
				const random = Math.random() * 100; // 生成0到100之间的随机数
				if (type == 'that') {

					if (random < 50) {
						return 2;
					} else if (random < 70) {
						return 5;
					} else if (random < 85) {
						return 10;
					} else if (random < 90) {
						return 15;
					} else if (random < 94) {
						return 20;
					} else if (random < 97) {
						return 25;
					} else if (random < 99) {
						return 30;
					} else {
						return 35;
					}
				} else {
					if (random < 50) {
						return 1;
					} else if (random < 70) {
						return 3;
					} else if (random < 85) {
						return 8;
					} else if (random < 90) {
						return 12;
					} else if (random < 94) {
						return 15;
					} else if (random < 97) {
						return 20;
					} else if (random < 99) {
						return 25;
					} else {
						return 28;
					}
				}

			},
			giftAddScore(num) {
				if (!this.isEnd) {
					this.leftPoint += Number(num) * 10
				}

			},
			handlePkClick(e) {
				console.log("被点击");
				if (!this.isEnd && this.isStart) {
					this.leftPoint += this.baseClickPoint
					this.$refs.pkClickEffect.handleTouchStart(e)
				}
			},
			handleThatGirlAutoAdd() {
				let num = this.getRandomValue('that')
				this.rightPoint += num
			},
			handleThisGirlAutoAdd() {

				let num = this.getRandomValue('this')
				this.leftPoint += num

			},
			startPk() {
				this.autoAddIntervalId = setInterval(() => {
					this.handleThatGirlAutoAdd()
					this.handleThisGirlAutoAdd()
				}, 500)
			},

		}
	}
</script>

<style lang="scss" scoped>
	.test-left {
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		left: 20rpx;
		top: 100rpx;
		background-image: url("https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/07051e24ddde4204970b229cf7e3204a.png");
		background-repeat: no-repeat;
		background-size: cover;
	}

	.m-pk {
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		// background: url("https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/f1ca160a97954f31b8e343be995c6237.jpg") no-repeat;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;


		.gift-icon {
			position: absolute;
			bottom: 200rpx;
			right: 50rpx;
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			background-color: rgba(0, 0, 0, .5);
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 9999;

			.gift-icon-img {
				width: 80rpx;
				height: 80rpx;

			}
		}

		.pkVideo {
			position: absolute;
			width: 100vw;
			height: 100vh;
			object-fit: cover;
			z-index: 9;
		}

		.top-user-info {
			position: absolute;
			width: 100vw;
			// height: 100rpx;
			// background-color: pink;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 99;

			.pk-center {
				width: 85%;
				height: 100%;
				// background-color: #fff;
				display: flex;
				align-items: flex-start;
				justify-content: flex-start;
				// background-image: linear-gradient(to right, rgba(10, 7, 27, 0) 0%, rgba(39, 171, 209, .3) 50%, rgba(249, 43, 142, .3) 50%, rgba(10, 7, 27, 0) 100%);
				// background-color: pink;

				// background-color: red;

				.left-myGirl,
				.right-thatGirl {
					width: 90rpx;
					height: 120rpx;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					// background-color: pink;


					.top-avatar {
						position: relative;
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
						background-color: transparent;
						overflow: hidden;
						border: 1rpx solid transparent;
						margin-bottom: 5rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						.avatar-content {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
							overflow: hidden;
						}

						.avatar-img {
							width: 100%;
							height: 100%;
							object-fit: cover;
						}

						.masker {
							position: absolute;
							left: 0rpx;
							top: 0rpx;
							width: 100%;
							height: 100%;
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: rgba(0, 0, 0, .5);
							font-size: 14rpx;
							color: #fff;
							z-index: 99999;
						}
					}



				}

				.left-myGirl {
					// margin-right: 15rpx;

					.bottom-name {
						font-size: 20rpx;
						font-weight: 700;
						width: 98rpx;
						text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .3);
						white-space: nowrap; //不换行
						overflow: hidden; //超出部分隐藏
						text-overflow: ellipsis; //文本溢出显示省略号
						color: #fff;
						text-align: center;
						// display: flex;
						// justify-content: center;
						// align-items: center;
						height: 30rpx;
						line-height: 30rpx;
					}

					.top-avatar {
						border-color: #47ecf0;
					}


				}

				.active-left-girl {
					.top-avatar {
						box-shadow: 0rpx 0rpx 30rpx #27abd1;

						.avatar-img {
							animation: bling 1s linear infinite;
						}
					}
				}

				.right-thatGirl {
					// margin-left: 15rpx;

					.bottom-name {
						font-size: 20rpx;
						font-weight: 700;
						width: 98rpx;
						text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .3);
						white-space: nowrap; //不换行
						overflow: hidden; //超出部分隐藏
						text-overflow: ellipsis; //文本溢出显示省略号
						color: #fff;
						text-align: center;
						// display: flex;
						// justify-content: center;
						// align-items: center;
						height: 30rpx;
						line-height: 30rpx;
					}

					.top-avatar {
						border-color: rgba(254, 75, 160, .8);
					}


				}

				.active-right-girl {
					.top-avatar {
						box-shadow: 0rpx 0rpx 30rpx #fe4ba0;

						.avatar-img {
							animation: bling 1s linear infinite;
						}
					}
				}

				@keyframes bling {
					0% {
						transform: scale(1);
					}

					50% {
						transform: scale(1.1);
					}

					100% {
						transform: scale(1);
					}
				}


				.center-blood {
					position: relative;
					flex: 1;
					// background-color: pink;
					height: 100%;

					.top-tip {
						display: flex;
						justify-content: center;
						align-items: center;
						margin-bottom: 10rpx;
						margin-top: 10rpx;
						font-size: 20rpx;
						font-weight: 700;
						text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .3);
						color: #fff;
						// height: 28rpx;
						line-height: 24rpx;
						// background-color: pink;

					}

					.wait-list {
						position: absolute;
						left: 0rpx;
						top: 0rpx;
						width: 100%;
						height: 40rpx;
						// background-color: pink;
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.left-wait-list,
						.right-wait-list {
							flex: 1;
							height: 100%;
							display: flex;
							align-items: center;




						}

						.left-wait-list {
							justify-content: flex-start;

							.wait-item {
								width: 35rpx;
								height: 35rpx;
								border-radius: 50%;
								object-fit: cover;
								margin-right: 10rpx;
								box-sizing: border-box;
								border: 1rpx solid #47ecf0;

								&:last-child {
									margin-right: 0rpx;
								}

								.wait-image {
									width: 100%;
									height: 100%;
									border-radius: 50%;
								}
							}

						}

						.right-wait-list {
							justify-content: flex-end;

							.wait-item {
								width: 35rpx;
								height: 35rpx;
								border-radius: 50%;
								object-fit: cover;
								margin-left: 10rpx;
								box-sizing: border-box;
								border: 1rpx solid rgba(248, 144, 193, 1);

								&:first-child {
									margin-left: 0rpx;
								}

								.wait-image {
									width: 100%;
									height: 100%;
									border-radius: 50%;
								}
							}

						}

					}

					.blood-content {
						width: 100%;
						height: 25rpx;
						border-radius: 20px;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						overflow: hidden;
						// margin-top: 18rpx;

					}


					.blood-left {
						position: relative;
						height: 25rpx;
						width: 50%;
						background: linear-gradient(to right, #27abd1, #47ecf0);
						background-color: transparent;
						text-align: left;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						color: #fff;
						font-size: 24rpx;
						line-height: 25rpx;
						box-sizing: border-box;
						padding-left: 12rpx;
						position: relative;

						.forward {
							position: absolute;
							top: 0rpx;
							right: -10rpx;
							width: 30rpx;
							height: 100%;
							border-radius: 0rpx 20rpx 20rpx 0rpx;
							// background-color: pink;
							background-color: #47ecf0;
							opacity: 0;



							.forwar-content {
								width: 100%;
								height: 100%;
								border-radius: 0rpx 20rpx 20rpx 0rpx;
								background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 50%, #fff 100%);

							}
						}







					}

					.active-left {
						.forward {
							opacity: 1;
							z-index: 99999;
						}

					}

					.blood-right {
						position: relative;
						height: 25rpx;
						flex: 1;
						background: linear-gradient(to right, #fe4ba0, #f92b8e);
						text-align: right;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						color: #fff;
						font-size: 24rpx;
						line-height: 30rpx;
						box-sizing: border-box;
						padding-right: 12rpx;

						.forward {
							position: absolute;
							top: 0rpx;
							left: -10rpx;
							width: 40rpx;
							height: 100%;
							border-radius: 20rpx 0rpx 0rpx 20rpx;
							// background-color: pink;
							background-color: #fe4ba0;
							opacity: 0;



							.forwar-content {
								width: 100%;
								height: 100%;
								border-radius: 20rpx 0rpx 0rpx 20rpx;
								background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 50%, #fff 100%);
							}
						}

					}

					.active-right {
						.forward {
							opacity: 1;
							z-index: 99999;
						}
					}

				}

			}
		}

	}
</style>